<template>
  <div class="dashboard-container">
    <!-- 资源数量统计 -->
    <div class="resource-stats">
      <div class="title">资源数量统计</div>
      <div class="headContainer">
        <div class="appStore">
          <div class="titleF" align="center">应用商店</div>
          <div class="storeContainer">
            <div class="content font">服务包数量
              <div>{{ servicePachageNumber }}</div>
            </div>
            <div class="content font">服务组数量
              <div>{{ serviceGroupNumber }}</div>
            </div>
            <div class="content font">中间件数量
              <div>{{ middlewareNumber }}</div>
            </div>
            <div class="content font">镜像数量
              <div>{{ mirrorNumber }}</div>
            </div>
          </div>
        </div>
        <div class="appManage">
          <div class="titleF" align="center">应用管理</div>
          <div class="appManageContent">
            <div class="manageContent font">服务实例总量
              <div>{{ serviceInstancesNumber }}</div>
            </div>
            <div class="manageContent font">运行服务实例总量
              <div>{{ runningServiceExamples }}</div>
            </div>
            <div class="manageContent font">停止服务实例总量
              <div>{{ stoppedServiceInstances }}</div>
            </div>
            <div class="manageContent font">服务组实例总量
              <div>{{ serviceGroupInstances }}</div>
            </div>
            <div class="manageContent font">异常服务实例总量
              <div>{{ abnormalServiceInstances }}</div>
            </div>
          </div>
        </div>
        <div class="storageManage">
          <div class="titleF" align="center">存储管理</div>
          <div class="storageContainer">
            <div class="storageContent font">持久卷声明数量
              <div>{{ persistentVolume }}</div>
            </div>
            <div class="storageContent font">存储类数量
              <div>{{ storageClasses }}</div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- 租户计算资源、应用商店类别统计、服务实例访问量、持久卷声明资源 容器 -->
    <div class="container">
      <!-- 租户计算资源 -->
      <div class="tenantComputingResource publicContainer">
        <div class="titleF">租户计算资源</div>
        <div style="display: flex;">
          <span ref="pieChartCpu" style="flex-grow:1;width: 220px;height:220px;"></span>
          <span ref="pieChartNc" style="flex-grow:1;width: 220px;height:220px;"></span>
        </div>
      </div>

      <!-- 应用商店类别统计 -->
      <div class="appStoreCategory publicContainer">
      <div class="titleF">应用商店类别</div>
      <div style="display: flex;">
        <span ref="pieChartService" style="flex-grow:1;width: 220px;height:220px;"></span>
        <span ref="pieChartMiddleware" style="flex-grow:1;width: 220px;height:220px;"></span>
      </div>
    </div>

      <!-- 服务实例访问量TOP5 -->
      <div class="serviceTraffic publicContainer">
      <div class="titleF">服务实例访问量TOP5</div>
      <el-table ref="multipleTable" tooltip-effect="dark" align="center" style="width: 100%" :data="serviceData"
          max-height="15rem" :row-style="{height: '1.8rem'}"
          :cell-style="{padding: '0'}"
      >
            <el-table-column prop="serviceName" label="实例名" width="100rem">
            </el-table-column>
            <el-table-column prop="cluster" label="集群" width="100rem">
            </el-table-column>
            <el-table-column prop="cpuLimit" label="CPU" width="100rem">
            </el-table-column>
            <el-table-column prop="cpuReverse" label="内存" width="100rem">
            </el-table-column>
            <el-table-column prop="description" label="描述" width="130rem">
            </el-table-column>
            <el-table-column prop="updateTime" label="创建时间" width="150rem">
            </el-table-column>
          </el-table>
      </div>

      <!-- 持久卷声明资源TOP5 -->
      <div class="persistentVolumeResource publicContainer">
      <div class="titleF">持久卷声明资源TOP5</div>
      <el-table ref="multipleTable" tooltip-effect="dark" align="center" style="width: 100%" :data="PVDRData"
            max-height="14.375rem" :row-style="{height: '1.8rem'}"
    :cell-style="{padding: '0'}"
>
            <el-table-column prop="resourceName" label="资源名" width="100rem">
            </el-table-column>
            <el-table-column prop="cluster" label="集群" width="100rem">
            </el-table-column>
            <el-table-column prop="cpuLimit" label="CPU" width="100rem">
            </el-table-column>
            <el-table-column prop="cpuReverse" label="内存" width="100rem">
            </el-table-column>
            <el-table-column prop="description" label="描述" width="130rem">
            </el-table-column>
            <el-table-column prop="updateTime" label="创建时间" width="150rem">
            </el-table-column>
          </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { right } from '@antv/x6/lib/registry/port-layout/line';
import * as echarts from 'echarts';

export default {
  name: 'Dashboard',
  data() {
    return{
      servicePachageNumber: 15,
      serviceGroupNumber: 10,
      middlewareNumber: 17,
      mirrorNumber: 12,
      serviceInstancesNumber: 30,
      runningServiceExamples: 20,
      stoppedServiceInstances: 5,
      serviceGroupInstances: 10,
      abnormalServiceInstances: 5,
      persistentVolume:20,
      storageClasses: 1,
      serviceData: [
        {
          'serviceName': '实例',
          'cluster': '集群',
          'cpuLimit': 10,
          'cpuReverse': 12,
          'description': '这是实例',
          'updateTime': '2024-03-05 18:54:41'
        },
        {
          'serviceName': '实例',
          'cluster': '集群',
          'cpuLimit': 10,
          'cpuReverse': 12,
          'description': '这是实例',
          'updateTime': '2024-03-05 18:54:41'
        },
        {
          'serviceName': '实例',
          'cluster': '集群',
          'cpuLimit': 10,
          'cpuReverse': 12,
          'description': '这是实例',
          'updateTime': '2024-03-05 18:54:41'
        },
        {
          'serviceName': '实例',
          'cluster': '集群',
          'cpuLimit': 10,
          'cpuReverse': 12,
          'description': '这是实例',
          'updateTime': '2024-03-05 18:54:41'
        },
        {
          'serviceName': '实例',
          'cluster': '集群',
          'cpuLimit': 10,
          'cpuReverse': 12,
          'description': '这是实例',
          'updateTime': '2024-03-05 18:54:41'
        }
      ],
      PVDRData: [
        {
          'resourceName': '资源',
          'cluster': '集群',
          'cpuLimit': 10,
          'cpuReverse': 12,
          'description': '这是资源',
          'updateTime': '2024-03-05 18:54:41'
        },
        {
          'resourceName': '资源',
          'cluster': '集群',
          'cpuLimit': 10,
          'cpuReverse': 12,
          'description': '这是资源',
          'updateTime': '2024-03-05 18:54:41'
        },
        {
          'resourceName': '资源',
          'cluster': '集群',
          'cpuLimit': 10,
          'cpuReverse': 12,
          'description': '这是资源',
          'updateTime': '2024-03-05 18:54:41'
        },
        {
          'resourceName': '资源',
          'cluster': '集群',
          'cpuLimit': 10,
          'cpuReverse': 12,
          'description': '这是资源',
          'updateTime': '2024-03-05 18:54:41'
        },
        {
          'resourceName': '资源',
          'cluster': '集群',
          'cpuLimit': 10,
          'cpuReverse': 12,
          'description': '这是资源',
          'updateTime': '2024-03-05 18:54:41'
        },
      ],
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    const myChartCpu = echarts.init(this.$refs.pieChartCpu);
    const myChartNC = echarts.init(this.$refs.pieChartNc);
    const myChartService = echarts.init(this.$refs.pieChartService);
    const myChartMiddleware = echarts.init(this.$refs.pieChartMiddleware);

    // 指定图表的配置项和数据
    const optionCpu = {
      tooltip: {
        trigger: 'item'
      },
      title: {
        text: 'cpu',
        left: 'center'
      },
      color:['#c23532','#2f4554'],
      series: [
        {
          name: 'cpu',
          type: 'pie',
          // radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            // { value: 1048, name: '已使用' },
            // { value: 735, name: '未使用' },
            { value: 580, name: '已使用' },
            // { value: 484, name: 'Union Ads' },
            { value: 300, name: '未使用' }
          ]
        }
      ]
    };
    const optionNc = {
      tooltip: {
        trigger: 'item'
      },
      title: {
        text: '内存',
        left: 'center'
      },
      color:['#c23532','#2f4554'],
      series: [
        {
          name: '内存',
          type: 'pie',
          // radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            // { value: 1048, name: '已使用' },
            // { value: 735, name: '未使用' },
            { value: 580, name: '已使用' },
            { value: 484, name: '未使用' },
            // { value: 300, name: 'Video Ads' }
          ]
        }
      ]
    };
    const optionService = {
      tooltip: {
        trigger: 'item'
      },
      title: {
        text: '服务包类别',
        left: 'center'
      },
      color:['#c23532','#2f4554'],
      series: [
        {
          name: '服务包类别',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            // { value: 1048, name: '已使用' },
            // { value: 735, name: '未使用' },
            { value: 580, name: '已使用' },
            // { value: 484, name: 'Union Ads' },
            { value: 300, name: '未使用' }
          ]
        }
      ]
    };
    const optionMiddleware = {
      tooltip: {
        trigger: 'item'
      },
      title: {
        text: '中间件类别',
        left: 'center'
      },
      color:['#c23532','#2f4554'],
      series: [
        {
          name: '中间件类别',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            // { value: 1048, name: '已使用' },
            // { value: 735, name: '未使用' },
            { value: 580, name: '已使用' },
            // { value: 484, name: 'Union Ads' },
            { value: 300, name: '未使用' }
          ]
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChartCpu.setOption(optionCpu);
    myChartNC.setOption(optionNc);
    myChartService.setOption(optionService);
    myChartMiddleware.setOption(optionMiddleware);
  }
}



</script>

<style scoped>
.dashboard-container
{
  display: flex;
  flex-direction: column;
}

.resource-stats{
  display: flex;
  flex-direction: column;
  height: 23vh;
  margin: 10px;
  /* color: #fff; */
  /* border:2px solid #000 ; */
}

.headContainer{
  display: flex;
  flex-direction: row;
  margin: 5px;
}

.storeContainer{
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-around; */
  align-items: flex-start;

}

.appManageContent{
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-around; */
  align-items: flex-start;
}

.storageContainer{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.content{
  display: flex;
  flex-direction: column;
  width: 45%;
  justify-content: center; /* 水平方向居中 */
  align-items: center; /* 垂直方向居中 */
  border: 1px solid #8a8484;
  margin: 4px 10px;
  padding: 3px;
  background-color: #4472c4;
  color: #fff;
}
.manageContent{
  display: flex;
  flex-direction: column;
  width: 30%;
  padding: 3px;
  justify-content: center; /* 水平方向居中 */
  align-items: center; /* 垂直方向居中 */
  border: 1px solid #cccccc;
  margin-bottom: 2px;
  margin: 4px 6px;
  background-color: #4472c4;
  color: #fff;
}
.storageContent{
  display: flex;
  flex-direction: column;
  width: 60%;
  justify-content: center; /* 水平方向居中 */
  align-items: center; /* 垂直方向居中 */
  align-content: space-around;
  border: 1px solid #cccccc;
  margin: 4px 10px;
  padding: 3px;
  background-color: #4472c4;
  color: #fff;
}

.font{
  font-size: 14px;
}

.appStore{
  width: 35%;
  height: 16vh;
  border: 1px solid #cccccc;
  margin: 0 25px 10px 10px;
  /* background-color:cornflowerblue; */
  /* background: linear-gradient(to bottom, rgb(107, 175, 240), rgb(245, 137, 227)) */
  /* background: linear-gradient(to right, rgb(122 190 219), rgb(84 112 198)); */
}

.appManage{
  width: 40%;
  height: 16vh;
  border: 1px solid #cccccc;
  margin: 0 25px 5px 10px;
}

.storageManage{
  width: 25%;
  height: 16vh;
  border: 1px solid #cccccc;
  margin: 0 25px 5px 10px;
}

.container{
  display: flex;
  flex-wrap: wrap;
  height: 65vh;
  margin: 10px;
}

.publicContainer{
  width: 49%;
  height: 48%;
  border: 2px solid #cccccc;

}

.title{
  margin:10px;
  color: #000;
  font-size: larger;
  font-weight: bolder;
}

.titleF{
  margin:10px;
  font-size: large;
  font-weight: bold;
}

.tenantComputingResource {
  margin-right: 1%;
  margin-bottom: 1%;
}

.appStoreCategory {
  /* margin-left: 1%; */
  margin-bottom: 1%;
}
.serviceTraffic{
  margin-right: 1%;

}
.persistentVolumeResource{
  /* margin-left: 1%; */

}
</style>
